<template>
  <div class="block">
      <header class="header">
          <img src="@/assets/images/content/item_title_bg.png"  class="header_bg" />
          <slot name="header"></slot>
      </header>
      <main class="main">
          <img src="@/assets/images/content/item_title_content.png"  class="main_bg" />
          <slot name="main"></slot>
      </main>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.block {
  color: #fff;
  margin-bottom: 40px;
}
.header{
    width: 620px;
    height: 40px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
   .header_bg{
       width: 100%;
       height: 40px;
       position: absolute;
       left: 0;
       top: 0;
       z-index: -1;
   }
}
.main{
    width: 620px;
    height: 320px;
    position: relative;
    .main_bg{
       width: 100%;
       height: 320px;
       position: absolute;
       left: 0;
       top: 0;
       z-index: -1;
   }
}
</style>
